<template>
    <div class="top">
     <svg class="icon" aria-hidden="true" @click="goBack">
     <use xlink:href="#icon-xiangzuojiantou"></use>
 </svg>
 <span>新用户注册</span>
    </div>
   <input type="text" placeholder="账号"v-model="account">
   <input class="inputpassword" type="password" placeholder="密码" v-model="password" >
   <input class="inputpassword" type="email" placeholder="邮箱" v-model="email">
   <svg class="icon" aria-hidden="true">
     <use xlink:href="#icon-yanjing_xianshi"></use>
 </svg>
   <div class="agreement">
     <input type="checkbox" class="inputchenked" v-model="isChecked" id="checkbox">
     我已阅读并同意<span>《金优陪使用协议》和《隐私政策》</span>
   </div>
   
   <!-- 只有当复选框勾选了才能登录 -->
   <button @click="register" :disabled="!isChecked" :style="{ backgroundColor: isChecked ? 'rgba(0, 186,173, 100%)' : 'gray' }">立即注册</button>
 
 </template>
 <script>
 import axios from 'axios';
 export default{
    
     data(){
         return {
             isChecked:false,
             account:'',
              password: '',
             email: ''
         };
     },
     methods:{
         goBack(){
             this.$router.go(-1);
         },
         login(){
             this.$router.push('myinfo');
         },
         enableLoginButton(){
             this.isChecked=true;
         },
         gotoregistersuccessful(){
            
         },
         async register() {
      if (!this.account || !this.password || !this.email) {
        alert('请填写所有字段');
        return;
      }

      try {
        const response = await axios.post('http://localhost:5000/api/auth/register', {
          username: this.account,
          email: this.email,
          password: this.password
        });

        if (response.status === 201) {
          alert('注册成功！');
          this.$router.push('registersuccessful');
        } else {
          alert('注册失败，请重试');
        }
      } catch (error) {
        console.error('注册错误:', error);
        alert('注册失败，请重试');
      }
    }

         
     }
 }
 </script>
 <style scoped>
 
 .top {
  width: 7.86rem;
  height: 2.68rem;
  background-image: linear-gradient(to bottom,rgba(55,170,176,87%),white);
  position: relative;
 }
 .top .icon{
     position: absolute;
     top: 50px;
     left: 10px;
    
 }
 .top span{
     position: absolute;
     top: 50px;
     left: 150px;
     font-size: 20px;
 }
 input{
     width: 7rem;
     height: 1.28rem;
     margin-left: 17px;
     border-radius: 5px;
     border: 1px solid gray;
     
 }
 .inputpassword{
     border-top: none;
     position: relative;
 }
 .icon{
     position: absolute;
     top: 4.5rem;
     right: 0.6rem;
 }
 .agreement{
     display: flex;
     margin-top: 20px;
     font-size: 12px;
     justify-content: center;
 }
 input[type="checkbox"]{
     width: 14px;
     height: 14px;
    
    
 }
 .agreement span{
     color:#00BAAD;
 }
 button{
     width: 7rem;
     height: 1.28rem;
    margin-left: 0.4rem;
    color: #FFFFFF;
    border: none;
    background-color:rgba(0, 186,173, 100%) ;
    margin-top: 0.4rem;
 }
 .select{
     margin-top: 0.3rem;
     color: #00BAAD;
 }
 .loginleft{
     margin-left: 0.7rem;
 }
 .loginright{
     margin-right:0.7rem;
     float: right;
 }
 .otherlogin{
     margin-top: 1rem;
     display: flex;
     color: #808080;
     font-size: 18px;
     justify-content: center;
     align-items: center;
 }
 .selectlogin{
     display: flex;
     justify-content:space-around;
     width: 100%;
 }
 
 .loginitem img{
     margin-top: 30px;
     width: 1.2rem;
     height: 1.2rem;
     display: block;
     margin-bottom: 20px;
     
     
 }
 .textapp{
     margin-left: 6px;
 }
 
 </style>